<template>
  <a-modal
    :title="fullScreenTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :width="width"
    :class="{ myFullScreen: fullScreen }"
  >
    <a-form-model ref="form" :model="form" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构" prop="branchCode">
            <a-tree-select
              show-search
              style="width: 100%"
              v-model="form.branchCode"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择机构"
              allow-clear
              multiple
              :maxTagCount="4"
              tree-default-expand-all
              :treeData="nbjghLists"
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body
                }
              "
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否独立报送"
            prop="separatelyReportFlag"
          >
            <j-tree-select
              ret="treeSelect"
              v-model="form.separatelyReportFlag"
              placeholder="请选择"
              dict="llbb_param_config,name,code"
              pidValue="1501452797715476482"
              hasChildField="has_child"
            >
            </j-tree-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import FullScreenTitle from '@/components/LIbb/FullScreenTitle'
import { queryNbjghList, queryJurPerOrgRelaList } from '@/api/api'

export default {
  name: 'LlbbJuridicalPersonMechanismForm',
  components: { FullScreenTitle },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    visible: {
      type: Boolean,
      default: false,
      required: false,
    },
    detail: {
      type: Object,
      default: false,
      required: false,
    },
    confirmLoading: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules: {
        separatelyReportFlag: [{ required: true, message: '请选择!' }],
        branchCode: [{ required: true, message: '请选择机构!' }],
      },
      reportsOptions: [],
      form: {
        separatelyReportFlag: '',
        branchCode: [],
      },
      width: 600,
      fullScreen: false,
      nbjghList:[],
      nbjghLists:[],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    this.initReportList2()
  },
  watch: {
    detail(newValue, oldValue) {
      if (newValue.bankNoCd) {
        this.initJurPerOrgRelaList(newValue.bankNoCd)
      }
    },
  },
  methods: {
    fullScreenTitle() {
      return (
        <full-screen-title
          title="机构配置"
          fullCoderEdit={this.fullCoderEdit}
          fullScreen={this.fullScreen}
        ></full-screen-title>
      )
    },
    fullCoderEdit() {
      this.width = this.fullScreen ? 600 : '100%'
      this.fullScreen = !this.fullScreen
    },
    //初始化报表表记录
    initJurPerOrgRelaList(bankNoCd) {
      queryJurPerOrgRelaList({ bankNoCd }).then((res) => {
        if (res.code === 200) {
          let data = res.result || {}
          data.branchCode =
            data && data.branchCode && data.branchCode.indexOf(',') > -1 ? data.branchCode.split(',') : []
          this.form = data
        } else {
          this.$message.warning('服务器出错')
        }
      })
    },
    //初始化机构
    initReportList2() {
      queryNbjghList().then((res) => {
        if (res.code === 200) {
          if (res.result && res.result.length > 0) {
            let list = res.result || []
            let treeList = list.filter((item) => item.ZSSJJGH === '0') || []
            if (list.length > 0) {
              this.loopTree(treeList, list)
            }
            this.nbjghLists = this.loop(treeList)
            this.nbjghList = this.loop(list)
          }
        } else {
          this.$message.warning('服务器出错')
        }
      })
    },
    loopTree(treeList, list) {
      treeList.map((item) => {
        item.children = list.filter((el) => el.ZSSJJGH === item.NBJGH) || []
        if (item.children.length > 0) {
          this.loopTree(item.children, list)
        }
      })
    },
    loop(list) {
      return list.map((item, index, arr) => {
        let c = { label: item.NAME || item.JRJGMC, value: item.CODE || item.NBJGH, id: item.CODE || item.NBJGH }
        if (item.children) {
          c.children = this.loop(item.children)
        }
        return c
      })
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const branchCode = this.form.branchCode ? this.form.branchCode.join(',') : ''
          this.$emit('ok', { ...this.form, bankNoCd: this.detail.bankNoCd, branchCode })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.fullScreen = false
      this.width = 600
      this.$emit('cancel')
    },
  },
}
</script>
<style lang="less" scoped>
.myFullScreen /deep/ .ant-modal {
  top: 0;
  padding-bottom: 0;
}
.myFullScreen /deep/ .ant-modal-content {
  height: 100vh;
}
</style>